<template>
	<view>
		<cu-custom :bgColor="mytheme" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">职业信用查询</block>
		</cu-custom>
		<view style="overflow: hidden;background-color: #73C0DE;color: #fff;">
			<view style="float: left;">
				<text style="margin-left: 15px;">职业信用档案编号：</text>
			</view>
			<view style="float: right;margin-right: 25px;">
				<text>PCF(20230609)NXYW-PA2804284589</text>
			</view>
		</view>
		<view class="charts-box">
			<view style="float: left;width: 45%;padding-left: 3%;">
				<qiun-data-charts
				  type="arcbar"
				  :opts="opts2"
				  :chartData="chartData2"
				/>
			</view>
			<view style="float: right;width: 52%;padding-top: 60px;">
				姓名：刘艳
				<view class="itemline"></view>
				女  |  19周岁
				<view class="itemline"></view>
				青海市海东地区化隆回族自治区
			</view>
		</view>
		
		<view class="charts-box" style="height: 700rpx;">
			<view style="background-color: #73C0DE;color: #fff;">
				<text style="margin-left: 20rpx;">用户图谱</text>
			</view>
		    <qiun-data-charts 
		      type="bubble"
		      :opts="opts"
		      :chartData="chartData"
		    />
		  </view>
	</view>

</template>
<script>
	import qiunDataCharts from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	const app = getApp();
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
			  mytheme: app.globalData.theme.backgroundColor, //全局颜色变量
			  
			  chartData2: {},
			   //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			  opts2: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: undefined,
				title: {
				  name: "246",
				  fontSize: 25,
				  color: "#2fc25b"
				},
				subtitle: {
				  name: "等级评价:F级",
				  fontSize: 15,
				  color: "#1890FF"
				},
				extra: {
				  arcbar: {
					type: "default",
					width: 10,
					backgroundColor: "#E9E9E9",
					startAngle: 0.75,
					endAngle: 0.25,
					gap: 2,
					linearType: "custom"
				  }
				}
			  },
				
		      chartData: {},
		      //您可以通过修改 config-ucharts.js 文件中下标为 ['bubble'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		      opts: {
		        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		        padding: [15,15,0,15],
		        enableScroll: false,
		        legend: {},
		        xAxis: {
				  disabled:true,
		          disableGrid: true,
		          gridType: "dash",
		          splitNumber: 5,
		          boundaryGap: "justify",
		          min: 0,
		          max: 250
		        },
		        yAxis: {
				  disabled:true,
		          disableGrid: true,
		          gridType: "dash",
		          data: [
		            {
		              min: 0,
		              max: 150
		            }
		          ]
		        },
		        extra: {
		          bubble: {
		            border: 2,
		            opacity: 0.8
		          }
		        }
		      }
		    };
		  },
		  onReady() {
		    this.getServerData2();
			this.getServerData();
		  },
		  methods: {
			  getServerData2() {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
					  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					  let res = {
						  series: [
							{
							  name: "正确率",
							  color: "#2fc25b",
							  data: 0.8
							}
						  ]
						};
					  this.chartData2 = JSON.parse(JSON.stringify(res));
					}, 500);
				  },
			  
			  
			  
			  
		    getServerData() {
		      //模拟从服务器获取数据时的延时
		      setTimeout(() => {
		        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		        let res = {
		            series: [
		              {
		                name: "英语水平较好",
		                data: [[95,95,50,"英语水平较好"]]
		              },
		              {
		                name: "信用记录较好",
		                data: [[130,30,40,"信用记录较好"]]
		              },
					  {
					    name: "普通劳动力",
					    data: [[180,70,35,"普通劳动力"]]
					  },
					  {
					    name: "有车一族",
					    data: [[30,130,30,"有车一族"]]
					  },
		            ]
		          };
		        this.chartData = JSON.parse(JSON.stringify(res));
		      }, 500);
		    },
		  }
		};
		</script>
		
		<style scoped>
		  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
		  .charts-box {
		    width: 100%;
			height: 430rpx;
			overflow: hidden;
		  }
		  .itemline{
			margin-top: 5rpx;
			margin-bottom: 5rpx;
		  	margin-left: 5rpx;
		  	margin-right: 20rpx;
		  	height: 2rpx;
		  	background-color: #CCCCCC;
		  }
		</style>